预加载单张图片和多张图片的实现

预加载
预加载：提前加载好资源，当需要时可以直接从本地缓存中渲染，有助于提升网页性能体验。
实现方式：
1.CSS中的background属性来实现
-------利用CSS的background属性将图片预加载到屏幕外的背景上。只要这些图片的路径保持不变，当它们在Web页面的其他地方被调用时，浏览器就会在渲染过程中使用预加载（缓存）的图片。简单、高效，不需要任何JavaScript。该方法虽然高效，但仍有改进余地。使用该法加载的图片会同页面的其他内容一起加载，增加了页面的整体加载时间

#preloadImg: after{
   
    content: "";
    background: url(http://xxxx/xxx/img.png) no-repeat -9999px -9999px;
}

2使用JavaScript方式来实现
在JS中利用Image对象，为元素对象添加src属性，将对象缓存起来待后续使用。

<!--为img元素给一个空白图片，并添加自定义属性data-src，然后编写JS给data-src赋值 -->
<img src='blank.png' data-src='img/testBlank.png' class='testBlankpng'>
<script></